<template>
  <div class="app-container">
    <div class="title">
      购物车
    </div>
    <ul>
      <!-- 这里key是good-1格式的 -->
      <li class="good-item" v-for="(value, key) in order" v-if='value' :key='key'>
          <div class="name">{{goods[key].name}}</div>
          <div class="price">{{goods[key].price}}</div>
          <cart-control @getOrder='getOrder' :goodId='goods[key].id'></cart-control>
      </li>
    </ul>
    <!-- <div class="total">
      <div class="total-price">{{totalPrice}}</div>
    </div> -->
  </div>
</template>
<script>
import cartControl from './cartControl/'
import * as _ from 'lodash'
export default {
  name: 'cart',
  props: {
    // goods: {}
  },
  data() {
    return {
      order: {},
      goods: {}
    }
  },
  computed: {
    // order() {
    //   return this.$store.state.order
    // }
  },
  mounted() {
    this.getGoods()
    this.getOrder()
  },
  methods: {
    getOrder() {
      this.order = this.$store.state.order
      // 计算总价
      // let totalPriceNum = 0
      // let currentType = ''
      // _.forIn(this.order, (value, key) => {
      //   const onePrice = this.goods[key].price
      //   currentType = currentType || onePrice[0]
      //   totalPriceNum += parseFloat(onePrice.substr(1, onePrice.length - 1)) * parseInt(value)
      // })
      // this.totalPrice = currentType + totalPriceNum
    },
    getGoods() {
      this.goods = {
        'good-1': {id: 1, name: '传统课程1', price: 10},
        'good-2': {id: 2, name: '传统课程2', price: 20},
        'good-3': {id: 3, name: '传统课程3', price: 30}
      }
    }
  },
  components: {
    cartControl
  }
}
</script>
<style lang="less" scoped>
.cartControl {
  align-self: flex-end;
  position: absolute;
  right: 30px;
}
.app-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  .title{
    font-size: 20px;
    color: #fff;
    background-color: rgb(80, 78, 78);
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  > ul {
    flex: 1;
    padding: 0 1.8rem;
    li.good-item {
      padding: 1rem 0;
      display: flex;
      border-bottom: 1px solid #e6e7e8;
      // justify-content: space-around;
      &:last-child {
        border: none;
      }
      .name {
        flex: 0.35;
        line-height: 24px;
        font-size: 14px;
        color: #07111b;
      }
      .price {
        flex: 0.2;
        line-height: 24px;
        font-size: 14px;
        font-weight: 700;
        color: #f01414;
      }
    }
  }
  .total {
    background-color: #141d27;
    color: #fff;
    height: 55px;
    padding: 0.5rem 2rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
    .total-price {
      font-size: 20px;
      font-weight: 700;
    }
    .prompt {
      font-size: 14px;
    }
  }
}
</style>
